<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demom</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	
	div{
		padding:50px;
	}


	#div1{
		background: red;
	}
	#div2{
		background: blue;
	}
	
	#div3{
		background: orange;
	}
	


</style>
</head>
<body>
	
	
	<div id="div1">
		<div id="div2">
			<div id="div3">
				<a href="http://www.baidu.com">前往百度</a>
			</div>
		</div>
	</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<script type="text/javascript">



//【注】  在实际使用中，若存在js原生代码比jq写法简单的话，就使用原生代码，因为jq的底层为封装的js方法，所以建议特定时候直接使用简单的js代码，以此减少性能的消耗
//获取元素的id
	$(function(){
		$('div').click(function(ev){
			//alert(this.id)//js写法

			alert($(this).attr('id'))//jq写法
			
		})

		$("a").click(function(ev){
			//ev.preventDefault()//阻止默认行为
			//ev.stopPropagation()//阻止事件冒泡
			return false//jq的false,一条代码实现即阻止默认行为又阻止冒泡事件
		})

//2.鼠标位置----------------
	
	$(document).click(function(ev){
		alert(ev.pageX+" , "+ev.pageY)  //带滚动距离
		alert(ev.clientX+" , "+ev.clientY) //以可视窗口为原点计算鼠标的距离
	})





	})	


</script>


</body>
</html>